import React from 'react'
import api from '../api/'
import sha1 from 'sha1'
import '../css/logo.less'
import { Icon ,Form, Input, Button } from 'antd'
const FormItem = Form.Item
class Logo extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        api.administrator_login({account: values.account,password: sha1(values.password)}).then(({ data }) => {
          if(data.status === 'success'){
            localStorage.setItem('LOGGED_USER', JSON.stringify(data.data.logined_administrator))
            this.props.history.push('/')
          }
        })
      }
    })
  }
  render() {
    const { getFieldDecorator } = this.props.form
    return(
      <div className="login">
       <div className="login__header">LOGIN 登录</div>
        <div className="login__panel">
        <div className="login-title">美丽雅积分商城后台管理系统 V1.0</div>
        <Form
          className="login-form"
          onSubmit={this.handleSubmit}
        >
          <FormItem>
            {getFieldDecorator('account', {
              rules: [{ required: true, message: '账户名不能为空'}],
            })(
              <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
            )}
          </FormItem>
          <FormItem>
            {getFieldDecorator('password', {
              rules: [{ required: true, message: '密码不能为空' }],
            })(
              <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
            )}
          </FormItem>
          <FormItem>
            <Button type="primary" htmlType="submit" className="login-form-button" style={{width: '100%' }} > Log in</Button>
          </FormItem>
        </Form>
        </div>
      </div>
    )  
  }
}
export default Form.create()(Logo)